/*----------------------------------------*\
  GRIDS AND GAPS
\*----------------------------------------*/

.gap {
  /* default Tailwind value */
}

.gap--responsive {
  @apply gap-5 xs:gap-7 sm:gap-9 lg:gap-10 xl:gap-12 3xl:gap-16;
}

.gap--top {
  @apply pt-5 xs:pt-7 sm:pt-9 lg:pt-10 xl:pt-12 3xl:pt-16;
}

.gap--bottom {
  @apply pb-5 xs:pb-7 sm:pb-9 lg:pb-10 xl:pb-12 3xl:pb-16;
}

.grid {
  /* default Tailwind value */
}

.grid--responsive-cols-2 {
  @apply md:grid-cols-2;
}

.grid--reverse {
  @media (min-width: theme('screens.md')) {
    & > *:nth-child(1) {
      order: 4;
    }
    & > *:nth-child(2) {
      order: 3;
    }
    & > *:nth-child(3) {
      order: 2;
    }
    & > *:nth-child(4) {
      order: 1;
    }
  }
}

.grid--responsive-cols-3 {
  @apply md:grid-cols-2 lg:grid-cols-3;
}

.grid--responsive-cols-4 {
  @apply md:grid-cols-2 lg:grid-cols-4;
}

/* 1/2 COLUMNS */

.grid--responsive-cols-1\/2-1\/2 {
  @media (min-width: theme('screens.md')) {
    grid-template-columns: 1fr 1fr;
  }
}

/* 1/4 AND 3/4 COLUMNS */

.grid--responsive-cols-1\/4-3\/4 {
  @media (min-width: theme('screens.md')) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: 'A A A B B B B B B B B B';

    & > *:nth-child(1) {
      grid-area: A;
    }
    & > *:nth-child(2) {
      grid-area: B;
    }

    &.grid--reverse {
      & > *:nth-child(1) {
        grid-area: B;
      }
      & > *:nth-child(2) {
        grid-area: A;
      }
    }
  }

  &.container__center--md,
  .container__center--md & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-areas: 'A A B B B B B B B B';
    }
  }

  &.container__center--sm,
  .container__center--sm & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      grid-template-areas: 'A A B B B B B B';
    }
  }

  &.container__center--xs,
  .container__center--xs & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-areas: 'A A B B B B';
    }
  }
}

/* 3/4 AND 1/4 COLUMNS */

.grid--responsive-cols-3\/4-1\/4 {
  @media (min-width: theme('screens.md')) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: 'A A A A A A A A A B B B';

    & > *:nth-child(1) {
      grid-area: A;
    }
    & > *:nth-child(2) {
      grid-area: B;
    }

    &.grid--reverse {
      & > *:nth-child(1) {
        grid-area: B;
      }
      & > *:nth-child(2) {
        grid-area: A;
      }
    }
  }

  &.container__center--md,
  .container__center--md & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-areas: 'A A A A A A A A B B';
    }
  }
}

/* 1/3 AND 2/3 COLUMNS */

.grid--responsive-cols-1\/3-2\/3,
.grid--responsive-cols-2\/3-1\/3 {
  @media (min-width: theme('screens.md')) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: 'A A A A A A B B B B B B';

    & > *:nth-child(1) {
      grid-area: A;
    }
    & > *:nth-child(2) {
      grid-area: B;
    }

    &.grid--reverse {
      & > *:nth-child(1) {
        grid-area: B;
      }
      & > *:nth-child(2) {
        grid-area: A;
      }
    }
  }

  @media (min-width: theme('screens.lg')) {
    grid-template-areas: 'A A A A B B B B B B B B';
  }

  &.container__center--md,
  .container__center--md & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-areas: 'A A A B B B B B B B';
    }
  }
}

.grid--responsive-cols-2\/3-1\/3 {
  @media (min-width: theme('screens.md')) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: 'A A A A A A B B B B B B';

    & > *:nth-child(1) {
      grid-area: A;
    }
    & > *:nth-child(2) {
      grid-area: B;
    }

    &.grid--reverse {
      & > *:nth-child(1) {
        grid-area: B;
      }
      & > *:nth-child(2) {
        grid-area: A;
      }
    }
  }

  @media (min-width: theme('screens.lg')) {
    grid-template-areas: 'A A A A A A A A B B B B';
  }

  &.container__center--md,
  .container__center--md & {
    @media (min-width: theme('screens.xl')) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-areas: 'A A A A A A A B B B';
    }
  }
}

/* add margin between consecutive grids */
.grid + .grid {
  @apply mt-5 xs:mt-7 sm:mt-9 lg:mt-10 xl:mt-12 3xl:mt-16;
}

/* Grid layout depending the number of items */

.grid--items-1 {
  @apply md:grid-cols-1;
}

.grid--items-2 {
  @apply md:grid-cols-2;
}

.grid--items-3 {
  @apply md:grid-cols-2;

  & > *:nth-child(1) {
    @apply col-span-2;
  }

  & > * {
    @apply col-span-2 md:col-span-1;
  }
}

.grid--items-4 {
  @apply md:grid-cols-3;

  & > *:nth-child(1) {
    @apply col-span-3;
  }

  & > * {
    @apply col-span-3 md:col-span-1;
  }
}

.grid--items-5 {
  @apply md:grid-cols-12;

  & > *:nth-child(1),
  & > *:nth-child(2) {
    @apply col-span-6;
  }

  & > * {
    @apply col-span-6 lg:col-span-4;
  }
}
